<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <link rel="stylesheet" href="../static/css/amazeui.min.css">
<link rel="stylesheet" href="../static/css/swiper-3.3.1.min.css">
<link rel="stylesheet" href="../static/css/wx.css">
      <style>
          body{

          }
.wx-basics-handel-introduce{  left: -110px; position: absolute; top: -125px}

          .bz{ height: 50px}

          #dt{
width: 100%;
-webkit-user-drag: none;
-moz-user-drag: none;
-ms-user-drag: none;
user-drag: none;
}
.dtyxj{position: absolute; bottom: 10px; right: 20px; z-index: 100000; height: 80px;}

.bg-gradient {
           margin: 0 auto;

           position:  fixed;;
           width: 100%;
           height: 100px;
           background: rgba(0,0,0,0.64);

         background: -moz-linear-gradient(top, rgba(0,0,0,0.64) 0%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.18) 69%, rgba(0,0,0,0.17) 70%, rgba(247,247,247,0) 99%, rgba(255,255,255,0) 100%);

         background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0.64)), color-stop(0%, rgba(0,0,0,0.65)), color-stop(69%, rgba(0,0,0,0.18)), color-stop(70%, rgba(0,0,0,0.17)), color-stop(99%, rgba(247,247,247,0)), color-stop(100%, rgba(255,255,255,0)));

         background: -webkit-linear-gradient(top, rgba(0,0,0,0.64) 0%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.18) 69%, rgba(0,0,0,0.17) 70%, rgba(247,247,247,0) 99%, rgba(255,255,255,0) 100%);

         background: -o-linear-gradient(top, rgba(0,0,0,0.64) 0%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.18) 69%, rgba(0,0,0,0.17) 70%, rgba(247,247,247,0) 99%, rgba(255,255,255,0) 100%);

         background: -ms-linear-gradient(top, rgba(0,0,0,0.64) 0%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.18) 69%, rgba(0,0,0,0.17) 70%, rgba(247,247,247,0) 99%, rgba(255,255,255,0) 100%);

         background: linear-gradient(to bottom, rgba(0,0,0,0.64) 0%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.18) 69%, rgba(0,0,0,0.17) 70%, rgba(247,247,247,0) 99%, rgba(255,255,255,0) 100%);

         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff', GradientType=0 );
z-index: 999999;
       }

       .qx{
 color: #fff; font-size: 16px; float: left; margin-left: 15px; line-height: 35px; margin-top: 10px; z-index: 999999999999
       }

.fs{
border-radius: 6px;font-size: 16px;
  float: right; line-height: 35px; margin-top: 15px; margin-right: 20px; width: 55px; height: 35px; background: #57be6a; color: #fff; text-align: center; z-index: 999999999999}
  .mescroll-rotate {
      -webkit-animation: mescrollRotate .6s linear infinite;
      animation: mescrollRotate .6s linear infinite;
  }
  @-webkit-keyframes mescrollRotate{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes mescrollRotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
  .mescroll-upwarp {
      min-height: 30px;
      padding: 15px 0;
      text-align: center;
      visibility: hidden;
  }  .upwarp-progress {
      display: inline-block;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid gray;
      border-bottom-color: transparent;
      vertical-align: middle;
  } .upwarp-tip {
      margin-left: 8px;
  }  .upwarp-tip  {
      display: inline-block;
      font-size: 12px;
      color: gray;
      vertical-align: middle;
  }
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
  .xz{background-image:url('../image/dtxz.png')   ; background-repeat: no-repeat;background-position:right;background-size:30px ;}
      </style>
  </head>
  <body>

        <div class="wx-handle-main" >

          <div class="bg-gradient" id="dht">
       <div class="qx" onclick="clw()" tapmode>取消</div>

              <div class="fs" onclick="fsdw()" tapmode>发送</div>
   </div>

            <div class="wx-basics-handel-modular am-cf">
                <div class="wx-basics-handel-modular-checkbox">
                    <label class="am-checkbox am-success">
                        <input type="checkbox" value="" data-am-ucheck class="userid">
                    </label>
                </div>
                <div class="wx-basics-handel-modular-main">
                    <div class="swiper-container">

                        <div class="swiper-wrapper">
                            <div class="swiper-slide">		<img src="../image/biaozhu.png" class="bz" >
                              	<img src="../image/dtyxj.png" class="dtyxj" >
                                <a href="javascript:;" class="wx-basics-handel-modular-a">
                                    <div class="am-g wx-basics-handel-introduce swiper-no-swiping">
                                       <iframe src="" id="dtiframe" width="150%" height="800px"></iframe>
                                    </div>
                                </a>
                            </div>
                            <div class="swiper-slide wx-basics-handel-introduce-span"  style=" position:relative">
<div class="ssk">
<div class="ssinput"> <img src="../image/ssdd.png"  style="height:22px; margin-right:10px" /> 搜索地点</div>
</div>


<div class="dzlb swiper-no-swiping"  >

<div id="jz" class="mescroll-upwarp mescroll-hardware" style="visibility: visible;/* display:none; */"><p class="upwarp-progress mescroll-rotate"></p></div>
<div  id="category" ></div>

</div>

<input type="hidden" name="dzid" id="dzid">
<input type="hidden" name="wz" id="wz">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../static/js/swiper-3.3.1.min.js"></script>
 	 <script type="text/javascript" src="../static/js/jquery-2.1.1.min.js"></script>
 	 <script type="text/javascript" src="../static/js/pinchzoom.js"></script>
   <script type="text/javascript" src="../script/doT.min.js"></script>
   <script type="text/javascript" src="../script/common.js"></script>
   <script type="text/x-dot-template" id="category_template">
{{~ it  : value : index }}
   <div class="listdz"  onclick="xz(this,{{=value.id}},'{{=value.thumb}}')">
 <div class="listtxt">  {{=value.title}} <br>
 <span class="juli">{{=value.url}}</span>
  </div>
  </div>

	{{~}}

   </script>
  <script type="text/javascript">

      var category = $api.byId('category');
       var category_template = $api.byId('category_template');
function xz(obj,id,thumb){
  //console.log(obj.getAttribute("name"));
$(".listdz").removeClass("xz");
  $(obj).addClass("xz")
    $("#dzid").val(id)
      $("#wz").val(thumb)

}

function fsdw(){
  var url=localStorage.getItem('domain') +$("#wz").val();
  var jsfun = 'dingwei("'+url+'");';
  api.execScript({
      name: 'chat',
      frameName: 'chatFrame',
      script: jsfun
  });
clw()
}

function clw(){
  api.closeWin({
     animation:{
    type:"fade",                //动画类型（详见动画类型常量）
    subType:"from_bottom",       //动画子类型（详见动画子类型常量）
    duration:300                //动画过渡时间，默认300毫秒
}
  });

}

   function fd(){
              $('div.am-g').each(function () {
                  new RTP.PinchZoom($(this), {
                    onZoomStart: function(object, event){
          // Do something on zoom start
          // You can use any Pinchzoom method by calling object.method()
      },
      onZoomEnd: function(object, event){
          // Do something on zoom end

          console.log(1);
      }
                  });


  });
              } ;





          var swiper = new Swiper('.swiper-container', {
              slidesPerView: 'auto',
  			direction : 'vertical',
              spaceBetween: 0,
              freeMode: true,
              freeModeSticky: true,
              resistance: true,
              noSwiping : true,
          });






function getdz(sort){

  api.ajax({
  url:localStorage.getItem('domain') +"/index.php/Home/Index/dt.html?sort="+sort,
  method: 'get',

  },function(ret,err){



    pagefn = doT.template(category_template.text);
      category.innerHTML = pagefn(ret.dt);
  	$("#jz").hide();


    })

}


      apiready = function(){
var dtzb;
          	var div_height = api.winHeight;
          	$(".am-cf").height(div_height);
          	$(".wx-basics-handel-modular-main").height(div_height);
              var header = $api.byId('dht');
  header.style.paddingTop = api.safeArea.top +"px" ;

  	$("#jz").show();


    api.ajax({
    url:localStorage.getItem('domain') +"/index.php/Home/Index/dt.html?sort=1000",
    method: 'get',

    },function(ret,err){

  dtzb=ret.dtzb

      pagefn = doT.template(category_template.text);
        category.innerHTML = pagefn(ret.dt);
    	$("#jz").hide();

      $("#dtiframe").attr("src","map.html?zb="+dtzb);
    console.log(dtzb);
      })



      };

      function daoYo(zoomLevel){
            category.innerHTML ="";
          	$("#jz").show();
        //alert(zoomLevel)
        if(zoomLevel<16){
          getdz(1000)
       console.log(16);
        }else if(zoomLevel<18&&zoomLevel>=16){
            getdz(500)
               console.log(18);
        }else if(zoomLevel>=18){
            getdz(200)
               console.log(18);
        }
      }

  </script>
  </html>
